<template>
  <v-card>
    <v-card-title>
      <v-btn color="primary" @click="addBrand">新增品牌</v-btn>
      <v-spacer/>
      <v-text-field label="输入关键字搜索" v-model="search" append-icon="search" @keyup.enter="searchByKey" hide-details/>
    </v-card-title>
    <v-divider/>
    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center">
          <img v-if="props.item.image" :src="props.item.image" width="130" height="40">
          <span v-else>无</span>
        </td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <td class="justify-center">
          <v-btn color="info" @click="editBrand(props.item)">编辑</v-btn>
          <v-btn color="warning" @click="deleteBrand( props.item.id)">删除</v-btn>
        </td>
      </template>
    </v-data-table>
    <!--弹出的对话框-->
    <v-dialog max-width="500" v-model="show" persistent>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{isEdit?'修改':'新增'}}品牌</v-toolbar-title>
          <v-spacer/>
          <!--关闭窗口的按钮-->
          <v-btn icon @click="closeWindow"><v-icon>close</v-icon></v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5">
          <my-brand-form :olderBrand="olderBrand"
                         :closeWindow="closeWindow"
                         :isEdit="isEdit"
                         :getDataFromServer="getDataFromServer"></my-brand-form>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-card>
</template>

<script>
  import MyBrandForm from './MyBrandForm';
  export default {
    name: "my-brand",
    data() {
      return {
        search: '', // 搜索过滤字段
        totalBrands: 0, // 总条数
        brands: [], // 当前页品牌数据
        loading: true, // 是否在加载中
        pagination: {}, // 分页信息
        headers: [ // 头信息
          {text: 'id', align: 'center', value: 'id'},
          {text: '名称', align: 'center', sortable: false, value: 'name'},
          {text: 'LOGO', align: 'center', sortable: false, value: 'image'},
          {text: '首字母', align: 'center', value: 'letter', sortable: true,},
          {text: '操作', align: 'center', value: 'id', sortable: false,}
        ],
        show: false,
        olderBrand: {},
        isEdit: false,
      }

    },
    components:{
      MyBrandForm

    },
    mounted() {
      this.getDataFromServer();
    },
    methods: {
      addBrand() {
        //添加商品,
        this.show = true;
        this.olderBrand = null;

      },
      deleteBrand(bid) {
        //点击删除时询问
        this.$message.confirm('此操作将永久删除数据，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          //删除数据的操作
          this.$http.delete("/item/brand/" + bid).then(() => {
            this.getDataFromServer();
          }).catch(()=>{this.$message.error("删除失败")});
        }).catch(()=>{
          this.$message.info("已取消删除");
        });

      },
      closeWindow() {

        this.show = false;
      },
      editBrand(brand) {
        this.isEdit = true;
        //编辑数据
        this.$http.get("item/category/bid/" + brand.id).then(({data}) => {
          this.show = true;
          this.olderBrand = brand;
          this.olderBrand.categories = data;
        }).catch(() => {
          this.$message.error("查询category出错");
        });
      },
      getDataFromServer() {
        this.$http.get('/item/brand/page', {
            params: {
              page: this.pagination.page,
              rows: this.pagination.rowsPerPage,
              sortBy: this.pagination.sortBy,
              desc: this.pagination.descending,
              key: this.search
            }
          }
        ).then(resp => {
          this.brands = resp.data.items;
          this.totalBrands = resp.data.total;
          this.loading = false;
        }).catch(() => {
          this.$message.error("查询出错");
        });
      },
      searchByKey() {
        if (this.search) {
          this.getDataFromServer();
        }
      }
    },
    watch: {
      pagination: {
        deep: true,
        handler() {
          this.getDataFromServer();
        }
      }
    }

  }
</script>
<style scoped>
</style>
